Day18 CSS網頁開始寫前的準備

2021 iThome 鐵人賽

DAY 18

Modern Web

我的網頁前端小小小教室系列第 18 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-02 20:07:27

811 瀏覽

分享至

學到這裡，我們差不多可以開始著手做出一個簡單的網頁了!

但是在這之前我們需要link一個CSS檔案，叫做reset.css檔案。

而我們為甚麼要有這個CSS檔案呢?不能直接寫嗎?答案是可以的，但是瀏覽器會有預設的CSS，才能夠分辨我們的Html標籤，例如:h1、h2、h3，寬度間距也會有預設的。這會導致一個問題，就是網頁無法完全按照我們想要的樣子去排版，讓我們看看以下範例。

<body>
    <div>
        <h1>標題</h1>
        <h3>導覽列</h3>
        <img src="https://picsum.photos/seed/picsum/200/300" alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem maiores maxime quam nam laudantium mollitia. Iusto, distinctio omnis expedita veritatis quod, explicabo perferendis est aliquid harum aspernatur ullam, eos commodi.</p>
    </div>
</body>

在預設的瀏覽器CSS中，標題與導覽列還有圖片中間都有間距，但這間距是多少呢?我們不知道。所以我們要自行設定，就必須加入reset.css。

連結link reset.css 並把程式碼複製下來開一個css檔案(名稱reset.css)。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
</head>

套用以後就會發現這些間距不見了!雖然h1、h2、h3這些分辨不出來了，但我們就可以自行透過font-size決定大小!讓網頁完成造著你的意思走。